<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- form表单 -->
        <!-- 从学科来的 -->
        <div v-if="id">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 分割线 -->
          <el-divider class="divider"></el-divider>
          <el-form :model="form"  :inline="true" status-icon ref="form" label-width="100px" class="demo-ruleForm" size="mini">
          <!-- 输入框 -->
          <el-form-item label="目录名称">
            <el-input type="type" v-model="form.directoryName" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item label="状态">
            <el-select v-model.number="form.state" placeholder="请选择" >
              <!-- <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option> -->
              <el-option
              v-for="(item, index) in status"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button @click="resetForm()">清除</el-button>
            <el-button type="primary" @click="searchForm()">搜索</el-button>
          </el-form-item>
          <el-form-item class="addbt">
            <!-- @click="$router.back()" 是返回上一级路由 -->
            <!-- <i class="el-icon-back" @click="$router.back()"></i> -->
            <el-button type="text" @click="$router.back()" class="el-icon-back">返回学科</el-button>
            <el-button type="success" icon="el-icon-edit" @click="addForm('ruleForm')" size="mini">新增目录</el-button>
          </el-form-item>

        </el-form>
        </div>
        <!-- 直接点击目录 -->
        <div v-else>
          <el-form :model="form"  :inline="true" status-icon ref="form" label-width="100px" class="demo-ruleForm" size="mini">
          <!-- 输入框 -->
          <el-form-item label="目录名称">
            <el-input type="type" v-model="form.directoryName" autocomplete="off"></el-input>
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item label="状态">
            <el-select v-model.number="form.state" placeholder="请选择">
              <!-- <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option> -->
              <el-option
              v-for="(item, index) in status"
              :key="index"
              :label="item.label"
              :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <el-button @click="resetForm()">清除</el-button>
            <el-button type="primary" @click="searchForm()">搜索</el-button>
          </el-form-item>
          <el-button type="success" icon="el-icon-edit" @click="addForm('ruleForm')" class="addbt" size="mini">新增目录</el-button>
        </el-form>
        </div>

        <!-- 数据提示的横条 -->
        <el-alert
          class="alert"
          :title="sum"
          type="info"
          :closable="false"
          show-icon>
        </el-alert>
        <!-- 表格 -->
        <el-table
          class="table"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="80"
            :index="indexMethod">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="190">
          </el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
            width="190">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            width="190">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="190">
            <template #default="{row}">
              {{row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column
            prop="totals"
            label="面试题数量"
            width="190">
          </el-table-column>
          <el-table-column
            prop="state"
            :formatter="formatterState"
            label="状态"
            width="190">
          </el-table-column>
          <el-table-column
            width="200"
            label="操作">
              <template slot-scope="scope">
                <!-- 启用按钮 -->
                <el-button
                v-if="!scope.row.state"
                size="medium"
                type="text"
                @click="handleEnable(scope.row)">启用</el-button>
                <!-- 禁用按钮 -->
                <el-button
                v-else
                size="medium"
                type="text"
                @click="handleEnable(scope.row)">禁用</el-button>
                <el-button
                  :disabled="!!scope.row.state "
                  size="medium"
                  type="text"
                  @click="handleEdit(scope.row)">修改</el-button>
                <el-button
                  :disabled="!!scope.row.state "
                  size="medium"
                  type="text"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block">
          <el-pagination
            hide-on-single-page
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="counts">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <!-- 从学科来的 -->
    <div v-if="id">
      <el-dialog :title="title" :visible="dialogVisible" width="400px" @close="reset">
      <el-form :model="dialogForm" :rules="rules" ref="ruleForm" label-width="100px">
        <!-- 这里就剩一个目录名称 -->
        <el-form-item label="目录名称" prop="name" >
          <el-input v-model="dialogForm.name" placeholder="请输入目录名称" style="width:70%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="reset()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    <!-- 直接点击目录 -->
    <div v-else>
      <el-dialog :title="title" :visible="dialogVisible" width="400px" @close="reset">
      <el-form :model="dialogForm" :rules="rules" ref="ruleForm" label-width="100">
        <el-form-item label="所属学科" prop="subject">
          <el-select v-model="dialogForm.subject" placeholder="请选择" style="width:70%">
            <el-option
            v-for="(item, index) in subjectsList"
            :key="index"
            :label="item.label"
            :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="name" >
          <el-input v-model="dialogForm.name" placeholder="请输入目录名称" style="width:70%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button @click="reset()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    </div>

  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
// 目录列表   目录新增   目录删除   目录编辑   目录状态
import { list as getTableData, add, remove, update, changeState } from '@/api/hmmm/directorys'
// 学科简单列表
import { simple as gitSubjectsList } from '@/api/hmmm/subjects'

// 目录状态枚举     状态枚举
import { status1, status } from '@/api/hmmm/constants.js'

// 处理时间的过滤器
// import { parseTimeByString } from '@/filters'

export default {
  created () {
    getCompanys()
    getQuestion()
    this.getList()
  },
  data () {
    return {
      // 状态枚举
      status,
      // 弹窗绑定的
      dialogForm: {
        // 所属学科
        subject: '',
        // 目录名称
        name: '',
        // 当前数据的id  目录
        id: null
      },
      // 搜索框绑定的
      form: {
        // 目录名称
        directoryName: '',
        // 状态
        state: null
      },
      // 用监听器监听到路由跳转的id
      id: null,
      // 用监听器监听到路由跳转的name
      name: null,
      // 表格的数据
      tableData: [],
      // 总记录数
      counts: 1,
      // 当前页码
      page: 1,
      // 每页数量
      pagesize: 10,
      // 弹窗开关
      dialogVisible: false,
      // 弹窗的宽度
      // formLabelWidth: '120px'

      // 学科简单列表的数据    这里面的value就是id
      subjectsList: '',
      // 学科id
      // subjectID: '',
      // 目录id
      directoryID: '',
      // 控制按钮是否禁用
      // cut: null,
      // 校验
      rules: {
        subject: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed: {
    // 弹窗的标题
    title () {
      // console.log(this.dialogForm.id)
      return this.dialogForm.id ? '修改目录' : '新增目录'
    },
    // 总数
    sum () {
      return `数据一共${this.counts}条`
    }
  },
  // 监听
  watch: {
    $route: {
      handler: function (route) {
        console.log(route.query)
        // 对route.query的值的检测
        // 如果有 id 和 name 则去取这个字段 如果没有 undefined 也不会报错
        this.id = route.query && route.query.id
        // console.log(route.query.id)
        this.name = route.query && route.query.name
        if (!route.query.id) {
          this.getList()
        }
      },
      // 开启立即监听  在初始化的时候就会监听一次
      immediate: true
    }
    // 如果有id的话，发请求赋值，重新渲染数据
  },
  methods: {
    // 启用按钮
    async handleEnable (row) {
      // console.log(row)
      // 1 是启用 0 是禁用
      // if (row.state === 0) {
      //   await changeState({
      //     id: row.id,
      //     state: 1
      //   })
      //   this.$message.success('操作成功')
      //   // this.cut = true
      // } else {
      //   await changeState({
      //     id: row.id,
      //     state: 0
      //   })
      row.state = Number(!row.state)
      await changeState(row)
      this.$message.success('操作成功')
      // this.cut = false
      // }
      this.getList()
    },
    // 删除
    async handleDelete (row) {
      // console.log(row, 'row')
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove({ id: row.id })
        // 删除成功后提示用户
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 提示完用户后重新渲染页面
        this.getList()
      }).catch()
    },
    // 通过change事件给学科的id赋值，否则就只有点击刷新的时候才会赋值
    // change (val) {
    //   this.subjectID = val
    //   console.log(this.subjectID, '111')
    //   console.log(this.dialogForm.subject, '222')
    // },
    // 修改
    handleEdit (row) {
      // 下拉框的数据
      this.getSubject()
      // 对数据进行赋值 回显
      // 目录的id
      this.directoryID = row.id
      // 学科的id
      // this.subjectID = row.subjectID
      // 所属学科
      // this.dialogForm.subject = row.subjectName
      this.dialogForm.subject = row.subjectID
      // 目录名称
      this.dialogForm.name = row.directoryName
      // 当前数据id
      this.dialogForm.id = row.id
      // console.log(this.dialogForm.id)
      // 弹窗
      this.dialogVisible = true

      // // 下拉框的数据
      // this.getSubject()
      // // 数据回显需要学科的id 而row.id是目录的id 这里先调目录详情获取许可id
      // const { data: courseDetails } = await detail({ id: row.id })
      // console.log(courseDetails, '123')
      // // console.log(courseDetails.subjectID)
      // // console.log(courseDetails)
      // // 目录id也存一份，用于提交的标识。
      // this.directoryID = row.id
      // console.log(row, 'row')
      // // 数据回显   学科详情
      // const { data } = await gitSubjectsDetails({ id: courseDetails.subjectID })
      // console.log(data, '789')
      // // 学科id存一份，用于提交的标识
      // this.subjectID = courseDetails.subjectID
      // // console.log(data)
      // // 赋值回显
      // this.dialogForm.subject = data.subjectName
      // this.dialogForm.name = courseDetails.directoryName
      // // 弹窗
      // this.dialogVisible = true
      // // 编辑接口
      // // update({})
    },
    // 弹窗的提交
    submit () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // console.log(this.subjectID)
          // console.log(this.directoryID)
          if (this.dialogForm.id) {
            // console.log(this.dialogForm.subject, 'id')
            // 有id的是编辑的提交
            // 提交的时候还需要目录的id，在编辑里把目录id也存一份 row.id

            // 编辑同新增一样，也需要判断是不是学科来的
            if (this.id) {
              await update({
                id: this.directoryID,
                subjectID: +this.id,
                directoryName: this.dialogForm.name
              })
            } else {
              await update({
                id: this.directoryID,
                subjectID: this.dialogForm.subject,
                directoryName: this.dialogForm.name
              })
            }
            // console.log(this.directoryID, '目录')
            // console.log(this.subjectID, '学科')
          } else {
            // 没有的是新增的
            // 新增里面还分是不是学科的新增，通过id判断
            if (this.id) {
              await add({
                subjectID: +this.id,
                directoryName: this.dialogForm.name
              })
            } else {
              await add({
                subjectID: this.dialogForm.subject,
                directoryName: this.dialogForm.name
              })
            }
            // 让页码为1重新刷新页面
            this.page = 1
          }
          this.getList()
          // 调用关闭的窗口
          this.reset()
          // 提示用户操作成功
          this.$message.success('操作成功')
        } else {
          return false
        }
      })
    },
    // 弹窗的取消
    reset () {
      this.$refs.ruleForm.resetFields()
      // 清空数据
      this.dialogForm = {
        // 学科id
        subject: '',
        // 项目名称
        name: '',
        id: null
      }
      this.dialogVisible = false
      // this.subjectID = null
      this.directoryID = null
    },
    // 新增
    addForm () {
      this.getSubject()
      this.dialogVisible = true
      // console.log(this.dialogForm.id)
    },
    // 搜索
    async searchForm () {
      // 把新数据的数量再赋值给总数
      const { data } = await getTableData({ ...this.form, subjectID: this.id })
      // console.log(data)
      this.tableData = data.items
      this.counts = data.counts
      // const { data } = await getTableData({ ...this.form, subjectID: this.id })
      // if (this.form.state === 1) {
      //   this.tableData = data.items.filter(obj => obj.state === 1)
      //   this.counts = this.tableData.length
      // } else if (this.form.state === 0) {
      //   this.tableData = data.items.filter(obj => obj.state === 0)
      //   this.counts = this.tableData.length
      // } else {
      //   this.tableData = data.items
      //   this.counts = this.tableData.length
      // }
    },
    // 清除
    resetForm () {
      if (this.id) {
        this.$refs.form.resetFields()
        this.form = {
        // 目录名称
          // directoryName: '',
          // 状态
          state: null
        }
      } else {
        this.$refs.form.resetFields()
        this.form = {
        // 目录名称
          directoryName: '',
          // 状态
          state: null
        }
      }

      this.getList()
    },
    // 表格的序号
    indexMethod (index) {
      return index++ + 1
    },
    // 分页器
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.page = 1
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getList()
    },
    // 目录状态枚举
    formatterState (row, column, cellvalue, index) {
      return status1.find(item => item.value === +cellvalue)?.label || '未知'
    },
    // 状态枚举
    // formatterState1 (row, column, cellvalue, index) {
    //   return status.find(item => item.value === +cellvalue)?.label || '未知'
    // },
    // 获取目录列表
    async getList () {
      // if (this.id) {
      //   const { data } = await getTableData({
      //     subjectID: this.id,
      //     page: this.page,
      //     pagesize: this.pagesize
      //   })
      //   // console.log(data)
      //   this.tableData = data.items
      //   this.counts = data.counts
      // } else {
      //   const { data } = await getTableData({
      //     page: this.page,
      //     pagesize: this.pagesize
      //   })
      //   // console.log(data)
      //   this.tableData = data.items
      //   this.counts = data.counts
      // }
      const { data } = await getTableData({
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.id,
        directoryName: this.form.directoryName,
        state: this.form.state
      })
      // console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 获取学科简单列表
    async getSubject () {
      const { data } = await gitSubjectsList()
      // console.log(data)
      this.subjectsList = data
      // console.log(data)
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-footer{
  margin-left: 150px;
  // float: right;
}
// 新增按钮
.addbt {
  // margin-left: 450px;
  float: right;
}
// 字体图标颜色
.el-icon-back {
  color: rgb(114, 177, 254);
}
// 分割线颜色
.divider {
  background-color:rgb(235, 238, 245);
  height: 0.5px;
}
// 分页器
.block {
  float: right;
}
// 表格表头的背景色
::v-deep .el-table tr th {
  background-color: rgb(249, 249, 249);
  border-bottom: 2px solid rgb(232, 232, 232) !important;
}
// 总数提示框和表格的间距
.alert {
  margin-bottom: 15px;
}

</style>
